<template>
	<view>
        <image class="pageProfile__bg" src="/static/img/indexBack.png" mode="aspectFill"></image>
        <view class="pageProfile">
            <view class="flex__row--center">
        		<view class="pageProfile__logo">
                    <image class="pageProfile__logo_img" src="/static/img/avatar.png" mode="aspectFill"></image>
                </view>
                <view class="pageProfile__name" :class="{'login': true}" @tap="routerTo('/pagesSubUser/login/login')">
                	登录/注册
                </view>
                <view class="pageProfile__btn">
                    <uni-icon color="#fff" type="chatbubble" size="24" @click="routerTo('/pagesSubMessage/list/list')">
                        <text class="uni-badge uni-badge-error uni-badge--small">34</text>
                    </uni-icon>
                    <uni-icon color="#fff" type="gear" size="24" @click="routerTo('/pagesSubSetting/setting/setting')"></uni-icon>
                </view>
            </view>
            <view class="pageProfile__grid">
            	<view class="pageProfile__grid_item" @tap="routerTo('/pagesSubGood/collection/collection')">
                    <text>34</text>
            		收藏夹
            	</view>
            	<view class="pageProfile__grid_item" @tap="routerTo('/pagesSubShop/collection/collection')">
                    <text>34</text>
            		关注店铺
            	</view>
            	<view class="pageProfile__grid_item" @tap="routerTo('/pagesSubGood/history/history')">
                    <text>34</text>
            		足迹
            	</view>
            	<view class="pageProfile__grid_item" @tap="routerTo('/pagesSubActivity/coupons/coupons')">
                    <text>34</text>
            		优惠券
            	</view>
            </view>
            <view class="uni-card pageCard">
                <view class="uni-card-header">
                    <view class="flex__row">
                        我的订单
                    </view>
                    <view class="uni-h6 flex__row" @tap="routerTo('/pagesSubShopping/tabList/tabList')">
                        查看全部订单
                        <uni-icon size="18" type="arrowright"></uni-icon>
                    </view>
                </view>
                <view class="uni-card-content">
                    <view class="pageProfile__order">
                        <view class="pageProfile__order_item" @tap="routerTo('/pagesSubShopping/tabList/tabList', {type: 1})">
                            <text class="uni-badge">1</text>
                            <image class="pageProfile__order_img" src="/static/icon/user.png" mode="aspectFill"></image>
                            待付款
                        </view>
                        <view class="pageProfile__order_item" @tap="routerTo('/pagesSubShopping/tabList/tabList', {type: 2})">
                            <text class="uni-badge">1</text>
                            <image class="pageProfile__order_img" src="/static/icon/user.png" mode="aspectFill"></image>
                            待发货
                        </view>
                        <view class="pageProfile__order_item" @tap="routerTo('/pagesSubShopping/tabList/tabList', {type: 3})">
                            <text class="uni-badge">1</text>
                            <image class="pageProfile__order_img" src="/static/icon/user.png" mode="aspectFill"></image>
                            待收货
                        </view>
                        <view class="pageProfile__order_item" @tap="routerTo('/pagesSubShopping/evaluate/evaluate')">
                            <text class="uni-badge">1</text>
                            <image class="pageProfile__order_img" src="/static/icon/user.png" mode="aspectFill"></image>
                            待评价
                        </view>
                        <view class="pageProfile__order_item" @tap="routerTo('/pagesSubShopping/tabList/tabList', {type: 5})">
                            <text class="uni-badge">1</text>
                            <image class="pageProfile__order_img" src="/static/icon/user.png" mode="aspectFill"></image>
                            退款/售后
                        </view>
                    </view>
                    <view class="cardLogistics">
                        <view class="cardLogistics__header">
                            最新物流
                            <text>03-07</text>
                        </view>
                        <view class="cardLogistics__contenter">
                            <image class="cardLogistics__img" src="/static/temp/good.jpg" mode="aspectFill"></image>
                            <view>
                                <view class="cardLogistics__title">
                                    <uni-icon size="18" type="checkbox-filled"></uni-icon>
                                    已签收
                                </view>
                                <view class="cardLogistics__title_sub">
                                    已签收，其他：叫放门口，投递员：李永强。。。
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <uni-list>
			<uni-list-item v-for="(item, index) in list" :key="index" :title="item.name" :thumb="item.imgUrl" @click="routerTo(item.link)"></uni-list-item>
		</uni-list>
        <uni-list>
			<uni-list-item v-for="(item, index) in list2" :key="index" :title="item.name" :thumb="item.imgUrl" @click="routerTo(item.link)"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

	import {
		router
	} from '@/common/util.js';
    
	export default {
		components: {
            uniIcon,
			uniList,
			uniListItem
		},
		data() {
			return {
				list: [
                    {
                        imgUrl: '../../../static/icon/user.png',
                        name: '收货地址',
                        link: '/pagesSubAddress/list/list'
                    },
                    {
                        imgUrl: '../../../static/icon/user.png',
                        name: '我的评论',
                        link: '/pagesSubUser/evaluate/evaluate'
                    }
                ],
				list2: [
                    {
                        imgUrl: '../../../static/icon/user.png',
                        name: '问题反馈',
                        link: '/pagesSubSetting/feedback/feedback'
                    },
                    {
                        imgUrl: '../../../static/icon/user.png',
                        name: '关于我们',
                        link: '/pagesSubSetting/about/about'
                    }
                ]
			};
		},
        methods: {
        	routerTo: function(link, param) {
                router.navigateTo(link, param);
        	}
        },
	}
</script>

<style lang="scss">
    @import "@/style/mixin/flex.scss";
    @import "@/style/mixin/text-overflow.scss";
    @import "@/style/page/flex.scss";

    .pageProfile{
        position: relative;
        padding: 144upx 24upx 0;

        &__bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 700upx;
            z-index: -1;
        }

        &__logo{
            margin-left: 54upx;
            margin-right: 24upx;
            overflow: hidden;
            border-radius: 100%;
            box-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.3);

            &_img{
                display: block;
                width: 128upx;
                height: 128upx;
            }
        }
        
        &__name{
            color: #fff;
            font-size: $uni-font-size-lg;

            &.login{
                font-size: $uni-font-size-sm;
                padding: 0 16upx;
                border-radius: 16upx;
                border: 1px solid #fff;
            }
        }
        
        &__btn{
            @include flex-self(full);
            @include flex(end);
            margin-right: 16upx;

            .uni-icon{
                position: relative;
                padding: 12upx;
            }
        }

        &__grid{
            @include flex(between);
            padding: 24upx 0;

            &_item{
                @include flex(center, center, column);
                width: 25%;
                color: #fff;
            }
        }

        &__order{
            @include flex(between);

            &_item{
                position: relative;
                @include flex(center, center, column);
                width: 20%;
                padding: 24upx 0;
                color: $uni-text-color-grey;
                font-size: $uni-font-size-sm;

                .uni-badge{
                    transform: scale(.8);
                    transform-origin: center center;
                    position: absolute;
                    top: 10upx;
                    right: 20upx;
                    background-color: transparent;
                    border: 1px solid $uni-color-primary;
                    color: $uni-color-primary;
                }
            }

            &_img{
                display: block;
                width: 56upx;
                height: 56upx;
                margin-bottom: 8upx;
            }
        }
    }

    .uni-badge--small{
        transform: scale(.8);
        transform-origin: center center;
        position: absolute;
        top: 0;
        right: -6px;
    }
    
    .pageCard{
        padding-bottom: 24upx;
    }

    .cardLogistics{
        background-color: $uni-bg-color-grey;
        border-radius: 16upx;
        margin: 0 24upx;
        padding: 0 24upx 24upx;

        &__header{
            @include flex(between, center);
            color: $uni-text-color-grey;
            font-size: $uni-font-size-sm;
            padding: 8upx 0;
        }

        &__contenter{
            @include flex(between, center);
        }

        &__img{
            @include flex-self(keep);
            display: block;
            width: 88upx;
            height: 88upx;
            border-radius: 8upx;
            margin-right: 24upx;
        }

        &__title{
            @include flex(null, center);
            color: $uni-color-primary;
        }

        &__title_sub{
            @include text-overflow(520upx);
            color: $uni-text-color-grey;
            line-height:1;
        }

    }

    .uni-list{
        margin-top: 24upx;
    }
</style>
